<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js对象文本转成标准JSON文本</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/mobile.css"/>
    <link rel="stylesheet" href="css/animation.css"/>
    <link type="text/css" id="css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shCoreDjango.css"/>
    <style>
        textarea {
            margin-top: 10px;
            width: 45%;
            height: 800px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-shadow: inset 0 0 2px 2px #ccc;
        }

        .ras {
            width: 100%;
            height: 20px;
        }

        .ras > label {
            display: block;
            float: left;
            margin-left: 40px;
        }

        div > ul {
            width: 1230px;
        }

        div > ul li {
            float: left;
            width: 45%;
            text-align: center;
            line-height: 50px;
            height: 50px;
            font-size: 2em;
        }

        .actionBtn {
            cursor: pointer;
            position: absolute;
            left: calc(45% + 5px);
            top: 300px;
            width: calc(10% - 10px);
            height: 40px;
            border: none;
            border-radius: 5px;
            color: #fff;
            background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00A0E9), color-stop(1, #3757fa)); /* Saf4+, Chrome */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/
        }

        .actionBtn:hover {
            left: calc(45% + 4px);
            top: 299px;
            background-color: #ff0;
            box-shadow: 1px 1px #000;
        }

        .actionBtn:active {
            box-shadow: inset 0 2px 2px 0 #ccc;
        }

        pre {
            box-shadow: inset 0 0 2px 2px #ccc;
        }

        #outputtext {
            padding: 10px;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>转换内容</li>
        <li style="float: right">转换结果</li>
    </ul>
</div>
<div class="clearfix"></div>
<div class="ras">
    <label class="radio"><input type="radio" name="higilight_style" checked="checked" value="default"/>默认样式</label>
    <label class="radio"><input type="radio" name="higilight_style" value="emacs"/>Emacs样式</label>
    <label class="radio"><input type="radio" name="higilight_style" value="eclipse"/>Eclipse样式</label>
    <label class="radio"><input type="radio" name="higilight_style" value="django"/>Django样式</label>
    <label class="radio"><input type="radio" name="higilight_style" value="fadetogrey"/>FadeToGrey样式</label>
    <label class="radio"><input type="radio" name="higilight_style" value="mdultra"/>MDUltra样式</label>
    <label class="radio"><input type="radio" name="higilight_style" value="midnight"/>Midnight样式</label>
    <label class="radio"><input type="radio" name="higilight_style" value="rdark"/>RDark样式</label>
</div>
<textarea id="inputtext" style="float: left">
{
    name:'mengchao',
    address:'Xian'
}
</textarea>

<button id="btn_fmat" class="actionBtn">转 换</button>
<div id="outputtext" style="float: right;height: 600px;width: 45%;"></div>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushAll.js"></script>
<script type="text/javascript" src="js/jsbeautifier.js"></script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>